<template>
  <view>
    <div class="box">
      <div class="row">
        <div class="col">
          <div class="label">前台域名/地址</div>
          <t-input type="url" v-model="form.qServerName" placeholder="请输入内容" />
          <div class="tag">开头必须加通信协议，末尾不要留斜杠。如：https://www.baidu.com</div>
        </div>
        <div class="col">
          <div class="label">后台域名/地址</div>
          <t-input type="url" v-model="form.hServerName" placeholder="请输入内容" />
          <div class="tag">开头必须加通信协议，末尾不要留斜杠。如：https://www.baidu.com</div>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="label">网站名称</div>
          <t-input v-model="form.webTitle" placeholder="请输入内容" />
          <div class="tag">前端显示</div>
        </div>
        <div class="col">
          <div class="label">后台网站标题</div>
          <t-input v-model="form.manageTitle" placeholder="请输入内容" />
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="label">前台默认语言</div>
          <t-select v-model="form.defaultLanguage">
            <t-option v-for="item in langList" :key="item.code" :label="item.name" :value="item.code" />
          </t-select>
        </div>
        <div class="col">
          <div class="label">网站币种</div>
          <t-input v-model="form.currency" placeholder="请输入内容" />
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="label">注册链接</div>
          <t-input v-model="form.regUrl" placeholder="请输入内容" />
        </div>
        <div class="col">
          <div class="label">注册短信验证</div>
          <t-radio-group v-model="form.isSms" default-value="0">
            <t-radio :value="1">开</t-radio>
            <t-radio :value="0">关</t-radio>
          </t-radio-group>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="label">注册邀请码</div>
          <t-radio-group v-model="form.isRecCode" default-value="1">
            <t-radio :value="1">必填</t-radio>
            <t-radio :value="0">选填</t-radio>
          </t-radio-group>
        </div>
        <div class="col">
          <div class="label">邀请码每日注册人数限制</div>
          <t-input-number v-model="form.regCodeNum" />
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="label">同IP注册上限</div>
          <t-input v-model="form.ipRegisterLimit" placeholder="请输入内容" />
          <div class="tag">0或不填表示不限制</div>
        </div>
        <div class="col">
          <div class="label">客服链接</div>
          <t-textarea v-model="form.serviceUrl" placeholder="请输入内容" />
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="label">上级佣金</div>
          <t-input-number v-model="form.rebate1" />
          <div class="tag">%，一级下属完成任务佣金</div>
        </div>
        <div class="col">
          <div class="label">次上级佣金</div>
          <t-input-number v-model="form.rebate2" />
          <div class="tag">%，二级下属完成任务佣金</div>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="label">次次上级佣金</div>
          <t-input-number v-model="form.rebate3" />
          <div class="tag">%，三级下属完成任务佣金</div>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="label">邀请奖励</div>
          <t-input-number v-model="form.regment" />
          <div class="tag">元</div>
        </div>
        <div class="col">
          <div class="label">注册奖励</div>
          <t-input-number v-model="form.registerPrize" />
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="label">充值汇率</div>
          <t-input v-model="form.usdtRate" placeholder="请输入内容" />
          <div class="tag">1U兑换平台币</div>
        </div>
        <div class="col">
          <div class="label">提现汇率</div>
          <t-input v-model="form.usdtRateOut" placeholder="请输入内容" />
          <div class="tag">1U兑换平台币</div>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="label">任务自动审核</div>
          <t-radio-group v-model="form.autoAudit" :default-value="1">
            <t-radio :value="1">是</t-radio>
            <t-radio :value="0">否</t-radio>
          </t-radio-group>
        </div>
        <div class="col">
          <div class="label">风险账户是否自动审核任务</div>
          <t-radio-group v-model="form.autoAuditDanger" :default-value="1">
            <t-radio :value="1">是</t-radio>
            <t-radio :value="0">否</t-radio>
          </t-radio-group>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="label">ios下载地址</div>
          <t-input v-model="form.appDownIos" placeholder="请输入内容" />
        </div>
        <div class="col">
          <div class="label">安卓下载地址</div>
          <t-input v-model="form.appDownAndroid" placeholder="请输入内容" />
        </div>
      </div>
      <div class="row">
        <div class="col" style="align-items: start; flex-wrap: nowrap">
          <div class="label" style="margin-right: 10px">公司简介</div>
          <TinymceEditor v-model="form.companyProfile" ref="editor"></TinymceEditor>
        </div>
      </div>
      <div class="btnBox">
        <t-button theme="primary" size="large" @click="onSubmit">立即提交</t-button>
        <t-button variant="outline" theme="default" size="large" @click="unGetSetting">重置</t-button>
      </div>
    </div>
  </view>
</template>
<script setup lang="ts">
import TinymceEditor from '@/components/tinymceEditor/index.vue';
import { ref } from 'vue';
import { getDictionaries, getSetting, addSetting, updateSetting } from '@/api/system/basicSetting/1';
import { MessagePlugin } from 'tdesign-vue-next';
interface FormDataType {
  id: string | number | null;
  qServerName: string;
  hServerName: string;
  webTitle: string;
  manageTitle: string;
  defaultLanguage: string;
  currency: string;
  regUrl: string;
  isSms: string | number;
  isRecCode: string | number;
  regCodeNum: string;
  ipRegisterLimit: string;
  serviceUrl: string;
  rebate1: number;
  rebate2: number;
  rebate3: number;
  regment: number;
  registerPrize: number;
  usdtRate: string;
  usdtRateOut: string;
  autoAudit: string | number;
  autoAuditDanger: string | number;
  appDownIos: string;
  appDownAndroid: string;
  companyProfile: string;
}
const INITIAL_DATA: FormDataType = {
  qServerName: '', // 前台域名/地址
  id: null,
  hServerName: '', // 后台域名/地址
  webTitle: '', // 网站名称
  manageTitle: '', // 后台网站标题
  defaultLanguage: '', // 前台默认语言，默认选项为 Apple
  currency: '', // 网站币种
  regUrl: '', // 注册链接
  isSms: 0, // 注册短信验证，默认关闭
  isRecCode: 1, // 注册邀请码，默认必填
  regCodeNum: '', // 邀请码每日注册人数限制
  ipRegisterLimit: '', // 同IP注册上限
  serviceUrl: '', // 客服链接
  rebate1: 0, // 上级佣金
  rebate2: 0, // 次上级佣金
  rebate3: 0, // 次次上级佣金
  regment: 0, // 邀请奖励
  registerPrize: 0, // 注册奖励
  usdtRate: '', // 充值汇率
  usdtRateOut: '', // 提现汇率
  autoAudit: 1, // 任务自动审核，默认开启
  autoAuditDanger: 1, // 风险账户是否自动审核任务，默认开启
  appDownIos: '', // iOS下载地址
  appDownAndroid: '', // 安卓下载地址
  companyProfile: '', // 公司简介
};
const form = ref({ ...INITIAL_DATA });

const langList = ref([]);

const emit = defineEmits(['handleClickDelete']);
// 提交
const onSubmit = () => {
  emit('handleClickDelete');
};
const submit = async () => {
  try {
    const res = form.value?.id ? await updateSetting(form.value) : await addSetting(form.value);
    if (res.code === 200) {
      MessagePlugin.success('提交成功');
      unGetSetting();
    }
  } catch (error) {
    console.log(error);
  }
};

// 获取配置
const unGetSetting = async () => {
  try {
    const res = await getSetting();
    form.value = res.data ? res.data : { ...INITIAL_DATA };
  } catch (error) {
    console.log(error);
  }
};

// 获取字典
const unGetDictionaries = async () => {
  try {
    const res = await getDictionaries({
      pageNum: 1,
      pageSize: 999,
      status: '1',
    });
    langList.value = res.rows;
  } catch (error) {
    console.log(error);
  }
};

unGetSetting();
unGetDictionaries();

defineExpose({
  submit,
});
</script>
<style lang="less" scoped>
.box {
  padding: 10px;

  .row {
    display: flex;
    padding: 25px 0;

    &:nth-child(2n) {
      // background-color: #f2f2f2;
    }

    .col {
      flex: 1;
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      .label {
        width: 110px;
        font-size: 12px;
        text-align: right;
        word-wrap: break-word;
        word-break: break-word;
        color: #666;
      }

      .tag {
        min-width: 110px;
        font-size: 12px;
        color: #999;
      }
    }
  }

  .btnBox {
    display: flex;
    justify-content: center;
  }
}
</style>

<style class="less">
.col {
  .t-input__wrap {
    width: 240px;
    margin: 0 10px;

    & .t-input {
      height: 38px;
      font-size: 12px;
    }
  }

  .t-select__wrap {
    width: 240px;

    .t-select-input {
      width: 240px;
      height: 38px;
      font-size: 12px;
    }
  }

  .t-radio-group {
    margin: 0 10px;
  }

  .t-textarea {
    width: 400px;
    margin: 0 10px;

    .t-textarea__inner {
      width: 400px;
      font-size: 12px;
    }
  }

  .t-input-number.t-input-number--row {
    width: 240px;
    display: flex;
    align-items: center;
    padding: 0 38px;
    margin: 0 10px;

    .t-button.t-button--variant-outline.t-button--theme-default.t-button--shape-square.t-button--icon-only {
      width: 38px;
      height: 38px;
    }

    .t-input__wrap {
      min-width: 156px;
    }
  }
}
</style>
